/*
 * @Author: Cary
 * @Date: 2022-10-24 19:14:03
 * @FilePath: \alien-docsd:\cary-word\react-project\my-app\src\fatPage\components\MyDateTime.js
 */
import { Space, Tabs, DatePicker, message, Popover } from "antd";
import "../index.css";
import { CalendarOutlined } from "@ant-design/icons";
import { useCallback, useEffect, useState } from "react";

import moment from "moment";

const { RangePicker } = DatePicker;
const TEMP_LOAD_SELECTKEY = 'temp_load_selectkey';
function FatPage({ onChange }) {

  let days = [7, 14, 30]
  let weeks = [4, 8, 12]
  let months = [2, 3, 4]
  
  const [timeRangOpen, setTimeRangOpen] = useState(false);
  const [currentTabs, setCurrentTabs] = useState('daily');
  const [currentItem, setCurrentItem] = useState();
  const [timeStartVal, setTimeStartVal] = useState('');
  
  const handleOpenChange = (open) => {
    setTimeRangOpen(open);
  }

  const handleRangeTimeChange = useCallback((dates, dateStrings, num) => {
    console.log(dates, dateStrings);
    setTimeStartVal(dateStrings.join('--'));
    handleOpenChange(false)
    localStorage.setItem(TEMP_LOAD_SELECTKEY, JSON.stringify({
      currentTabs: currentTabs,
      currentItem: num || currentItem,
      startTime: dateStrings.join('--'),
    }));
    onChange && onChange(currentTabs, dates, dateStrings);
  }, [currentTabs, currentItem]) 


  const handleClickRangeTime = (num, type) => {
    let startTime = moment().format('YYYY-MM-DD');
    setCurrentItem(num)
    if (type === 'days') {
      let endTime = moment().subtract(num, type).format('YYYY-MM-DD');
      handleRangeTimeChange([moment(endTime), moment(startTime)], [endTime, startTime], num);
    } else if (type === 'weeks') {
      let endTime = moment().subtract(num, type).format('YYYY-MM-DD');
      handleRangeTimeChange([moment(endTime), moment(startTime)], [endTime, startTime], num);
    } else if (type === 'months') {
      let startTime = moment().format('YYYY-MM');
      let endTime = moment().subtract(num, type).format('YYYY-MM');
      handleRangeTimeChange([moment(endTime), moment(startTime)], [endTime, startTime], num);
    }
  }

  const handleTabsChange = (key) => {
    setCurrentTabs(key)
  }

  useEffect(() => {
    const temp_load_selectkey = localStorage.getItem(TEMP_LOAD_SELECTKEY);
    if (temp_load_selectkey) {
      const { startTime, currentTabs, currentItem } = JSON.parse(temp_load_selectkey);
      setTimeStartVal(startTime);
      setCurrentItem(currentItem);
      setCurrentTabs(currentTabs || 'daily');
      onChange && onChange(currentTabs, moment(startTime), startTime);
    }
  }, [])

  const getTimeRang = () => {
    return (
      <div className="my-time-cuspicker-body">
        <Tabs activeKey={currentTabs} onChange={handleTabsChange}>
          <Tabs.TabPane tab="Daily" key="daily">
            {
              days.map((item, index) => <div className={`my-tcb-cusitem ${item == currentItem ? 'tcactive': ''}`} 
                onClick={() => handleClickRangeTime(item, 'days')}
                key={index}>Last {item} days</div>)
            }

            <div className="my-tcb-cusitem">Custom date</div>
            <div className="my-tcb-cusitem-empty"></div>
            <RangePicker style={{ width: '100%' }} onChange={handleRangeTimeChange} />
          </Tabs.TabPane>
          <Tabs.TabPane tab="Weeks" key="weeks">
            {
              weeks.map((item, index) => <div className={`my-tcb-cusitem ${item == currentItem ? 'tcactive': ''}`} 
                onClick={() => handleClickRangeTime(item, 'weeks')}
                key={index}>Last {item} weeks</div>)
            }
            <div className="my-tcb-cusitem">Custom week</div>
            <div className="my-tcb-cusitem-empty"></div>
            <RangePicker style={{ width: '100%' }} picker="week" onChange={handleRangeTimeChange} />
          </Tabs.TabPane>
          <Tabs.TabPane tab="Mouthly" key="mouthly">
            {
              months.map((item, index) => <div className={`my-tcb-cusitem ${item == currentItem ? 'tcactive': ''}`} 
                onClick={() => handleClickRangeTime(item, 'months')}
                key={index}>Last {item} months</div>)
            }
            <div className="my-tcb-cusitem">Custom month</div>
            <div className="my-tcb-cusitem-empty"></div>
            <RangePicker style={{ width: '100%' }} picker="month" onChange={handleRangeTimeChange}/>
          </Tabs.TabPane>
        </Tabs>
      </div>
    )
  }

  return (
    <Popover
      content={getTimeRang()}
      trigger="click"
      open={timeRangOpen}
      onOpenChange={handleOpenChange}
    >
      <div className="my-time-cuspicker">
        <Space>
          <CalendarOutlined />
          <div className="mt-start-text"> { timeStartVal ? timeStartVal : '开始时间' } </div>
        </Space>
      </div>
    </Popover>
  );
}

export default FatPage;
